<template>
  <div class="mac-container">
    <h1>MAC协议编辑器</h1>
    
    <div class="form-group">
      <!-- 目的MAC地址输入 -->
      <div class="form-item">
        <label for="dstMac">请输入目的Mac</label>
        <input 
          id="dstMac" 
          type="text" 
          v-model="formData.dstMac" 
          placeholder="FF:FF:FF:FF:FF:FF"
          class="form-control"
        >
      </div>
      
      <!-- 负载数据输入 -->
      <div class="form-item">
        <label for="payload">请输入负载数据</label>
        <input 
          id="payload" 
          type="text" 
          v-model="formData.payload" 
          placeholder="660341124张三丰"
          class="form-control"
        >
      </div>
      
      <!-- 发送次数输入 -->
      <div class="form-item">
        <label for="count">请输入发送次数</label>
        <input 
          id="count" 
          type="number" 
          v-model.number="formData.count" 
          min="1"
          class="form-control"
        >
      </div>
      
      <!-- 发送按钮 -->
      <div class="form-item">
        <button @click="sendEtherFrame" class="send-button">发送</button>
      </div>
      
      <!-- 通知区域 -->
      <div v-if="notification" class="notification" :class="notification.type">
        {{ notification.message }}
        <button @click="clearNotification" class="notification-close">&times;</button>
      </div>
      
      <!-- 结果显示区域 -->
      <div class="result-section">
        <label>发送结果</label>
        <div class="result-container">
          <textarea 
            v-model="resultText" 
            readonly 
            class="result-textarea"
          ></textarea>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

// 表单数据模型
const formData = reactive({
  dstMac: 'FF:FF:FF:FF:FF:FF',
  payload: '660341124张三丰',
  count: 5
})

// 结果显示文本
const resultText = ref('')

// 通知系统
const notification = ref<{
  message: string
  type: 'success' | 'error' | 'info'
} | null>(null)

// 显示通知
function showNotification(message: string, type: 'success' | 'error' | 'info' = 'info') {
  notification.value = { message, type }
  setTimeout(clearNotification, 3000)
}

// 清除通知
function clearNotification() {
  notification.value = null
}

// 发送以太网帧
async function sendEtherFrame() {
  // 验证MAC地址格式
  const macRegex = /^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$|^(FF[:-]){5}(FF)$/
  if (!macRegex.test(formData.dstMac) && formData.dstMac !== 'FF:FF:FF:FF:FF:FF') {
    showNotification('MAC地址格式不正确！请使用类似 FF:FF:FF:FF:FF:FF 的格式', 'error')
    return
  }

  // 清空结果区域并添加处理中信息
  resultText.value = '正在发送MAC帧...\n'
  
  try {
    // 模拟发送过程
    for (let i = 1; i <= formData.count; i++) {
      const response = await fetch('/api/send_mac', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({formData})
      })
      if (response.ok){
      const timestamp = new Date().toLocaleTimeString()
      resultText.value += `[${timestamp}] 已发送第 ${i} 帧: 目的MAC=${formData.dstMac}, 负载="${formData.payload}"\n`
      }else{
        resultText.value += `发送第 ${i} 个MAC包时出错: ${response.statusText}\n`
      }
      // 滚动到底部显示最新信息
      const textarea = document.querySelector('.result-textarea') as HTMLTextAreaElement
      if (textarea) {
        textarea.scrollTop = textarea.scrollHeight
      }
    }
    
    showNotification(`成功发送 ${formData.count} 个MAC帧！`, 'success')
  } catch (error) {
    resultText.value += `发送失败: ${error instanceof Error ? error.message : '未知错误'}\n`
    showNotification('发送MAC帧时出错！', 'error')
  }
}
</script>

<style scoped>
.mac-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.back-button {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 10px 20px;
  font-size: 16px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.back-button:hover {
  background-color: #218838;
}

h1 {
  text-align: center;
  color: #343a40;
  margin-bottom: 25px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

label {
  font-weight: bold;
  color: #495057;
  margin-bottom: 5px;
}

.form-control {
  padding: 8px 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.form-control:focus {
  outline: none;
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
}

.send-button {
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 15px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
  align-self: flex-start;
}

.send-button:hover {
  background-color: #0069d9;
}

/* 通知样式 */
.notification {
  padding: 10px 15px;
  border-radius: 4px;
  margin-bottom: 10px;
  position: relative;
}

.notification-close {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  opacity: 0.7;
}

.notification.success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.notification.error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.result-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.result-container {
  border: 1px solid #ced4da;
  border-radius: 4px;
  overflow: hidden;
}

.result-textarea {
  width: 100%;
  height: 300px;
  padding: 10px;
  border: none;
  resize: none;
  font-family: monospace;
  background-color: #212529;
  color: #d4d4d4;
  line-height: 1.5;
}
</style>